<template>
    <div>
        <h1>{{ showNum }}</h1>
        <h1>这是store 中的数据：{{ num }}</h1>
       
        <button @click="sub">------------11111111</button>
        <button @click="subN(10)">----------nnnnnnnnnnn</button>
        <button @click="asyncSub">异步 ---------111111111</button>
        <button @click="asyncSubN(10)">异步--------------nnnnnnnnnnn</button>
    </div>
</template>

<script>
    import {mapState,mapMutations,mapActions,mapGetters} from "vuex"

    export default {
        name:"Decre",
          
        computed:{
            //mapState 获取store 中的所有数据，然后将其映射为当前组件的computed。
            //mapGetters 获取getters 中的所有数据，然后将其映射为当前组件的computed。

            ...mapState("count",["num"]),  
            ...mapGetters("count",["showNum"])
        },
       
        methods:{
            // mapMutations  获取store 中的所有mutations方法，然后将其映射为当前组件的 methods
            // mapActions   获取store 中的所有actions方法，然后将其映射为当前组件的 methods
            ...mapMutations("count",["sub","subN"]),
            ...mapActions("count",["asyncSub","asyncSubN"])
        }
    }
</script>

<style scoped>

</style>